@import '../../common/css/customeStyle.scss';

.ModuleGoodsGroup {
  width: 100%;
  overflow: hidden;

  .de-group {
    position: relative;
    display: flex;
    height: 11.73333vw;
    overflow: hidden;
    .de-group__list {
      flex-flow: row nowrap;
      width: 100%;
      overflow-x: auto;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;

      .de-group__item {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 4vw;
        font-size: 28px;
        line-height: 40px;
        letter-spacing: 0;
        white-space: nowrap;
        position: relative;
        &.active{
          font-weight: bold;
          @extend .customePageStyle;
        }
        &.active::after{
          display: block;
          content: '';
          position: absolute;
          width: 50%;
          left: calc(50% - 25%);
          bottom: 15px;
          height: 4px;
          @extend .customePageBackgroundStyle;
        }
      }

      .de-group__spacing {
        font-size: 36px;
        font-weight: 100;
        opacity: .3;
      }
    }

    .de-group__list:after {
      flex: 0 0 16vw;
      height: 100%;
      content: '';
      -webkit-box-flex: 0;
    }

    .de-group__list::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
      display: none;
    }

    .de-group__list,
    .de-group__search {
      display: flex;
      align-items: center;
    }

    .de-group__filter {
      position: absolute;
      right: 0;
      width: 16vw;
      height: 11.73333vw;
      background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 63%);
    }
  }

  .GroupGoods {
    width: 100%;
    box-sizing: border-box;

    .header {
      height: 44px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;

      .theme {
        width: 6px;
        height: 28px;

        margin-right: 12px;
      }

      .title {
        height: 44px;
        font-size: 32px;
        font-weight: bold;
        text-align: left;
        color: #333333;
        line-height: 44px;
      }
    }

    .goods-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      &.border {
        .goods-item {
          width: 328px;
          border: 2px solid #e0e0e0;

          .goods-img {
            min-height: 328px;
          }
        }
      }

      &.cards {
        .goods-item {
          background: #fff;
          box-shadow: 0 2px 12px hsla(210, 1%, 40%, .12);
        }
      }

      .goods-item {
        width: 332px;

        display: flex;
        flex-direction: column;
        border-radius: 0;
        overflow: hidden;

        position: relative;

        &:nth-of-type(1),
        &:nth-of-type(2) {
          margin-top: 0;
        }

        .goods-label {
          position: absolute;

          top: 0;
          left: 0;

          color: #fff;
          border-radius: 0 0 16px 0;
          padding: 0 14px;
          height: 30px;

          display: flex;
          align-items: center;
          justify-content: center;

          z-index: 2;

          .txt {
            font-size: 20px;
          }
        }

        .goods-img-wrap {
          position: relative;
          padding-top: 100%;
          overflow: hidden;
          .goods-sold-out {
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            display: flex;
            justify-content: center;
            align-items: center;

            .sold-out-container {
              width: 166px;
              height: 166px;

              border-radius: 83px;

              background-color: rgba(0, 0, 0, 0.3);

              display: flex;
              justify-content: center;
              align-items: center;

              .txt {
                font-size: 33px;
                font-weight: 400;
                color: #ffffff;
              }
            }
          }

          .goods-img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;

            img {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        .goods-panel {
          padding: 20px 26px 33px;

          display: flex;
          flex-direction: column;
          flex-grow: 1;
          justify-content: space-between;

          .goods-title {
            font-family: PingFangSC-Regular;

            word-break: break-all;
            visibility: visible;

            max-width: 280px;
            font-size: 28px;
            font-weight: 400;
            color: #333333;
            line-height: 36px;

            text-overflow: ellipsis;
            overflow: hidden;

            display: -webkit-box;
            -webkit-box-orient: vertical;

            -webkit-line-clamp: 2;

            &.tag {
              height: 36px;

              -webkit-line-clamp: 1;
            }
          }

          .tags {
            display: flex;
            align-items: center;
            max-width: 280px;
            margin-top: 10px;

            overflow-x: scroll;

            &::-webkit-scrollbar {
              width: 0;
              height: 0;
              color: transparent;
              display: none;
            }

            .tag {
              height: 26px;
              border-radius: 2px;

              flex-shrink: 0;
              display: flex;
              justify-content: center;
              align-items: center;

              margin-right: 8px;

              &:last-of-type {
                margin-right: 0;
              }

              .txt {
                padding: 0 8px;

                height: 20px;
                font-size: 20px;
                font-weight: 400;
                line-height: 20px;
              }
            }
          }

          .sale-price {
            display: flex;
            align-items: baseline;
            font-weight: 700;

            letter-spacing: 0;
            line-height: 1;

            font-family: PingFangSC-Semibold;

            .price-0 {
              font-size: 30px;
            }

            .price-1 {
              font-size: 34px;
            }

            .price-2 {
              font-size: 24px;
            }
          }
        }

        .goods-left-panel {
          .goods-sales {
            margin-top: 18px;

            font-size: 22px;
            color: #9e9e9e;
          }

          .goods-line {
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin-top: 20px;

            .goods-price {
              display: flex;
              align-items: baseline;

              .del-price {
                margin-left: 7px;
                font-size: 24px;
                line-height: 1;
                font-weight: 400;

                color: #9e9e9e;
                text-decoration: line-through;
              }
            }

            .goods-cart {
              height: 33px;
              width: 33px;
            }
          }
        }

        .goods-center-panel {
          align-items: center;

          .goods-line {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            .sale-price {
              margin: 20px 0;
            }

            .goods-cart {
              height: 54px;
              width: 180px;

              display: flex;
              justify-content: center;
              align-items: center;

              &.borderRadius {
                border-radius: 28px;
              }

              .txt {
                color: #fff;
                font-size: 22px;
              }
            }
          }
        }
      }
    }

    .view-more-wrap {
      width: 100%;

      padding-left: 30px;
      padding-right: 30px;
      padding-top: 26px;

      box-sizing: border-box;
    }

    .view-more {
      height: 76px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;

      display: flex;
      justify-content: center;
      align-items: center;

      .txt {
        height: 40px;
        font-size: 28px;
        font-weight: 400;
        color: #333333;
        line-height: 40px;
      }
    }
  }

}
